import React from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import styles from './index.module.css'
import { useHistory } from 'react-router-dom'
// 引入api
import apiServe  from '../../api/apiServer'
export default function Register () {
    // 路由hooks
    const history = useHistory()
    const onFinish =async (values) => {
        const { username, password } = values
        let res = await apiServe.setRegister({ username, password })
        const { status, description } = res
        if (status === 200) {
            Toast.show({
				icon: 'success',
				duration: 500,
				content: description,
			})
            setTimeout(() => {
                history.push('/login')
            }, 500);
        } else {
            Toast.show({
				icon: 'error',
				duration: 500,
				content: description,
			})
        }
    }
    // 登录
    const Login = () => {
        history.push('/login')
    }
    // 回到首页
    const goHome = () => {
        history.push('/')
    }
    return (
		<div className={styles.page}>
			<div className={styles.Login}>
				<Form
					onFinish={onFinish}
					footer={
						<Button block type='submit' color='success'>
							立即注册
						</Button>
					}
				>
					<Form.Item name='username' label='账号' rules={[{ required: true, message: '账号不能为空' }]}>
						<Input placeholder='请输入姓名' />
					</Form.Item>
					<Form.Item name='password' label='密码' rules={[{ required: true, message: '密码不能为空' }]}>
						<Input placeholder='请输入密码' type='password' />
					</Form.Item>
					<Form.Item name='aginpassword' label='确认密码' rules={[{ required: true, message: '密码不能为空' }]}>
						<Input placeholder='请再次确认密码' type='password' />
					</Form.Item>
				</Form>
			</div>
			{/* 暂无账号立即注册 */}
			<div className={styles.footer}>
				<p onClick={goHome} style={{ textAlign: 'left' }}>
					首页
				</p>
				<p onClick={Login} style={{ textAlign: 'right' }}>
					已有账号，立即登录
				</p>
			</div>
		</div>
	)
}
